<template>
  <!--<a-table :columns="columns" :data-source="data" :pagination="false" size="small">
    <a :href="text" slot="link" slot-scope="text">{{ text }}</a>
  </a-table>-->
  <div class="box2">
    <table border="0" class="table_main">
      <!--<thead>
      <tr>
        <th class="coll1">工单号</th>
        <th class="coll2">是否紧急</th>
        <th class="coll3">工单状态</th>
        &lt;!&ndash;<th class="coll4">报修科室</th>
        <th class="coll5">维修事项</th>
        <th class="coll6">维修地点</th>
        <th class="coll7">备注</th>
        <th class="coll8">派工时间</th>
        <th class="coll9">处理人</th>&ndash;&gt;
      </tr>
      </thead>-->
      <thead class="zindex">
      <tr>
        <th class="coll1">标题</th>
        <th class="coll2">来源</th>
        <th class="coll3">发布日期</th>
        <!--<th class="coll4">报修科室</th>
        <th class="coll5">维修事项</th>
        <th class="coll6">维修地点</th>
        <th class="coll7">备注</th>
        <th class="coll8">派工时间</th>
        <th class="coll9">处理人</th>-->
      </tr>
      </thead>
      <tbody :class="{anim:animate==true, hei: isLenght===true}">
      <tr v-for="(item, index) in tableData" :key="index" >
        <td class="coll1" :title="item.code"><a :href="item.urlLink"  target="_blank" style="color: #ffffff;" >{{ item.title }}</a></td>
        <td class="coll2" :title="item.channel">{{ item.channel }}</td>
        <td class="coll3" :title="item.createTime" >{{ item.createTime }}</td>
        <!--<td class="coll4" :title="item.deptName">{{ item.deptName }}</td>
        <td class="coll5" :title="item.items">{{ item.items }}</td>
        <td class="coll6" :title="item.palce">{{ item.palce }}</td>
        <td class="coll7" :title="item.remarks">{{ item.remarks }}</td>
        <td class="coll8" :title="item.distributeTime">{{ item.distributeTime }}</td>
        <td class="coll9" :title="item.userName">{{ item.userName }}</td>-->
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { refLinkList } from '@/api/api'
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      ellipsis: true,
    },
    {
      title: '来源',
      dataIndex: 'source',
      key: 'source',
      ellipsis: true,
      // width: 80,
    },
    {
      title: '发布日期',
      dataIndex: 'date',
      key: 'date',
      ellipsis: true,
      width: 80,
    },

  ];

  export default {
    name: 'InformationBar',
    data () {
      return {
        timer: '',
        animate: false,
        model:{},
        tableData: [ ],
        endId: '',
        isLenght: false,
        num: 10, //表格展示条数大于num设置的值就触发循环
        loopsTime: 3000,
      }
    },
    created(){
      this.getList()
    },
    methods: {
      getList () {
        refLinkList().then((res)=>{
          var that = this
            if(res.success){
              that.tableData = res.result.records
            }
        })
      },
      scroll () {
        this.animate = true
        setTimeout(() => {
          this.tableData.push(this.tableData[0])
          this.tableData.shift()
          this.animate = false
          if (this.tableData[0].id === this.endId) {
            // console.log('请求刷新数据')
            this.getList()
            clearInterval(this.timer)
          }
        }, 500)
      },
      // See (goodsId) {
      //   if(this.$global.getCookie('SYB_TX[tokenId]')){
      //     window.location.href =goodsId; //  跳转链接
      //   }else{
      //     this.$router.push({path: '/login'})
      //   }
      // },
    }
  }
</script>

<style scoped>
  .box2{
    width: 100%;
    height: 29vh;
    /*height: 30vh;*/
    /*height: 283px;*/
    overflow: hidden;
    border: 1px solid #538ad3;
    border-radius: 4px;
  }
  .table_main{
    width: 100%;
    color: #fff;
    position: relative;
  }
  .table_main tr{
    line-height: 2.44rem;
    border-bottom: 1px solid #538ad3;
  }
  .table_main thead {
    width: 100%;
    /*line-height: 2rem;*/
    font-size: 1em;
    display: table;
    table-layout: fixed;
    border-bottom: none;
    box-sizing: border-box;
  }
  .zindex{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background: #0c1629;
    border-bottom: none;
  }
  .zindex tr th{
    border-bottom: none;
    padding: 0 0.5rem;
    /*border-right: 0;*/
    /*border-left: 0;*/
  }
  .table_main thead th {
    font-weight: 300;
    table-layout: fixed;
    box-sizing: border-box;
  }
  .table_main tbody.hei{
    /*height: 352px;*/
  }
  .table_main tbody {
    display: block;
    width: 100%;
    /*background: rgba(6, 6, 122, 0.6);*/
    /*height: 40vh;*/
    /* 隐藏滚动条兼容 */
    -ms-scroll-chaining: chained;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    /* -ms-scroll-snap-type: proximity; */
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    overflow-y: scroll;
    /* 火狐 */
    scrollbar-width: none;
    /* ie */
    -ms-overflow-style: none;
  }
  .table_main tbody::-webkit-scrollbar {
    display: none;
  }
  .table_main tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .table_main tbody tr td {
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.5rem;
  }
  .box2 .coll1{
    width: 50%;
  }
  .box2 .coll2{
    width: 25%;
  }
  .box2 .coll3{
    width: 25%;
  }
  .box2 .coll4{
    width: 10%;
  }
  .box2 .coll5{
    width: 14%;
  }
  .box2 .coll6{
    width: 18%;
  }
  .box2 .coll7{
    width: 12%;
  }
  .box2 .coll8{
    width: 12%;
  }
  .box2 .coll9{
    width: 6%;
  }
  .anim{
    transition: all 0.5s;
    margin-top: -40px;
    /*margin-top: -2.25rem;*/
  }

  .red{
    color: #ff0000;
  }
  .yellow{
    color: #ffcc00;
  }
  /*设置奇数行颜色*/
  /*table tr:nth-child(odd)
  {
    background: #f00;
  }*/
  /*设置偶数行颜色*/
  table tr:nth-child(even)
  {
    /*background: rgba(255,255,255,0.1);*/
    background: #162746;
  }
</style>
